<template>
  <div class="class">
    <!--    标题-->
    <div class="cl-title">
      <van-nav-bar title="全部分类" />
    </div>
    <!--    搜索栏-->
    <div class="cl-search">
      <van-search placeholder="请输入搜索关键词" shape="round" />
    </div>
    <!--    侧边栏主题-->
    <div class="cl-content">
      <van-tree-select
        :active-id.sync="activeId"
        :items="items"
        :main-active-index.sync="activeIndex"
        @click-nav="click"
      >
        <template #content>
          <div class="cl-right">
            <div
              v-for="(item, index) in items"
              v-show="index == findex"
              :key="index"
              class="con-box"
            >
              <div
                v-for="(item1, cindex) in item.children"
                :key="cindex"
                class="con-con"
              >
                <img
                  :src="item1.image.external_url"
                  height="75px"
                  width="75px"
                />
                <p style="text-align: center">{{ item1.name }}</p>
              </div>
            </div>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { categoryInfo } from '@/api/class'

export default {
  name: 'classCom',
  // import引入的组件需要注入到对象中才能使用",
  components: {},
  data () {
    // 这里存放数据",
    return {
      findex: 0,
      items: [],
      activeId: 1,
      activeIndex: 0
    }
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 方法集合",
  methods: {
    click (index) {
      this.findex = index
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  async created () {
    const {
      data: {
        data: { list }
      }
    } = await categoryInfo()
    console.log(list)
    list.forEach((v) => {
      this.items.push({
        text: v.name,
        id: v.category_id,
        children: v.children
      })
    })
  }
}
</script>
<style lang="less">
.class {
  .cl-content {
    .van-tree-select {
      .van-tree-select__nav {
        height: 80vh;
      }

      .van-tree-select__content {
        height: 70vh;
      }

      .con-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      .con-con {
        width: 33%;
        float: left;
        text-align: center;
        margin: 10px 0;
      }
    }
  }
}
</style>
